<template>
  <div class="top_box">
    <div class="top_box_left">
      <div class="code_left" />
      <div class="concent">
        <div class="title_top">
          <h3>{{ title }}</h3>
        </div>
        <div class="monad">单位：万元</div>
        <div class="concent_bot">
          <div v-for="(item,index) in list" :key="index" class="concent_bot_item">
            <p>{{ item.num }}</p>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="top_box_right">
      <img src="@/assets/img/homwAnalyse/插画.png" alt=""></div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: () => {
        return '';
      }
    },
    list: {
      type: Array,
      default: () => ([])
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.top_box{
  width: 100%;
  height: 100%;
  display: flex;
  .top_box_left{
      width: 71%;
    height: 100%;
    background: #ffffff;
    border-radius: 4px;
    padding:px2vw(22px) px2vw(25px);
    display: flex;
    .code_left{
      width: 21%;
    }
    .concent{
      padding-left: px2vw(30px);
      flex: 1;
      height:100% ;
      .title_top{
        height: 26%;
        align-items: center;
        h3{
 color: #333333;
        font-size: px2vw(32px);
        margin: 0;
        }

      }
      .monad{
        color: rgba(0,0,0,0.45);
        font-size: px2vw(18px);
        height: 12%;
        align-items: center;
      }
      .concent_bot{
        height: 62%;
        display: flex;
        justify-content: space-between;
        .concent_bot_item{
          width: 33%;
          height: 100%;
          align-items: center;
          p{
            margin: 0;
            font-size: px2vw(48px);
            color: #faad14;
          }
          span{
color: rgba(0,0,0,0.85);
            font-size: px2vw(24px);

          }
        }
      }
    }
  }
  .top_box_right {
    width: calc(29% - px2vw(34px));
    margin-left: px2vw(34px);
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
